<template>
  <div class="wrapper">
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide class="box" v-for="item in imgUrl" :key="item.id"><img :src="item.url" alt=""></swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css' //引入样式
  import { swiper, swiperSlide } from 'vue-awesome-swiper' // 使用组件
    export default {
        name: "Swiper",
        props:{//接受参数
            imgUrl:Array
        },
        components: {//注册组件
          swiper,
          swiperSlide
        },
        data(){
             return {
               swiperOption:{
                 //和官网swiper配置一模一样
                 pagination:".swiper-pagination",
                 loop:true,
                 autoplay:2000000
               },
               // imgUrl:[
               //   {id:"001",url:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/81f5e1c19d95227c5d9b593dd02de787.jpg_750x200_e1780a55.jpg"},
               //   {id:"002",url:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/1d8faa9f4d49b77ca1e61e2b478260f7.jpg_750x200_25cf76e2.jpg"},
               //   {id:"003",url:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/1a3988d46c7db7d3848fa50460e5eb07.jpg_750x200_6382fd3e.jpg"},
               //   {id:"004",url:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201910/e7eac5a5e99e6517c61b953c0fece63b.jpg_750x200_4b701cf8.jpg"}
               // ]
             }
        }
    }
</script>

<style lang="stylus" scoped>
  // 样式穿透
  .wrapper  >>> .swiper-pagination-bullet-active{
    background :white;
  }
   .wrapper{
      width: 100%;
      overflow:hidden;
      height:0;
      padding-bottom :26.6666%;
      .box{
          touch-action: none;
          img{
            width: 100%
          }
      }
   }
</style>
